import { Button, Table, Space } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

// 组件
const SceneTable = (props) => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const navigate = useNavigate();

  const editClick = (data)=>{
    navigate('/home/market/sceneEdit',{state:{data}})
  }
  const columns = [
    {
      title: "活动名称",
      dataIndex: "marketingName",
    },
    {
      title: "营销类型",
      dataIndex: "marketingType",
    },
    {
      title: "活动时间",
      dataIndex: "activityTime",
    },
    {
      title: "会员范围",
      dataIndex: "memberScope",
    },
    {
      title: "活动状态",
      dataIndex: "activityState",
    },
    {
      title: "添加时间",
      dataIndex: "addTime",
    },
    {
      title: "操作",
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" onClick={()=>{editClick(record)}}>编辑</Button>
          <Button type="link">停用</Button>
        </Space>
      ),
    },
  ];
  const PageTotal = `共有${props.Datas.length}条数据`

  const onSelectChange = (newSelectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const showTotal = (tableData) => {
    return `数量 ${tableData.length} 条`
  }
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div className="SceneDataPage">
      <div
        className="SceneDataPageHead"
        style={{
          marginBottom: 16,
        }}
      >
        <span
          style={{
            marginLeft: 8,
          }}
        >
          {hasSelected ? `Selected ${selectedRowKeys.length} items` : ""}
        </span>
      </div>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={props.Datas}
        pagination={{
          total: {PageTotal},
          showTotal: ()=>showTotal(props.Datas),
          showSizeChanger: true,
          showQuickJumper: true,
        }}
        rowKey={(record)=>record.marketingId}
      />
    </div>
  );
};

export default SceneTable;
